<template>
  <view class="main publishPage">
    <u-input v-model="formData.name" placeholder="请输入作品名称" border="none"></u-input>
    <view class="scImg">
      <view class="scBox" v-if="!formData.picture" @click="uploadImg">
        <u-icon name="plus" bold size="26"></u-icon>
        <view>上传参赛作品</view>
        <view>支持JPG/GIF/PNG格式 RGB模式，不超过20M</view>
      </view>
      <view v-else style="width: 100%; height: 100%">
        <image :src="formData.picture" mode="aspectFill" />
        <view class="closeBox" @click="formData.picture = ''">
          <u-icon name="close"></u-icon>
        </view>
      </view>
    </view>
    <u-textarea style="margin-top: 46rpx" v-model="formData.introduce" height="100" maxlength="200" border="none" placeholder="在这里分享你的想法..." count></u-textarea>
    <view class="theme"> <image src="../../static/my/zt.png" mode="scaleToFill" /> {{ theme }}</view>
    <view class="buttomBox">
      <u-button color="#3B70FD" @click="submit" shape="circle">发布公开</u-button>
    </view>
  </view>
</template>
<script setup lang="ts">
import { signUp } from "@/api/home";
import { BASE_UPLOADURL } from "@/utils/request";
import { ref } from "vue";
const { activityId, theme } = defineProps<{
  activityId: string;
  theme: string;
}>();
const formData = ref({
  name: "",
  activityId,
  picture: "",
  introduce: "",
});
const uploadImg = () => {
  uni.chooseImage({
    count: 1, //默认9
    sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
    sourceType: ["album", "camera"], //从相册选择或者打开相机
    success: function (res) {
      let tempFilePaths = res.tempFilePaths;
      for (let i = 0, len = tempFilePaths.length; i < len; i++) {
        uni.showLoading({
          title: "加载中",
        });
        uni.uploadFile({
          url: BASE_UPLOADURL, //仅为示例，非真实的接口地址
          filePath: tempFilePaths[i],
          name: "file",
          header: {
            Authorization: uni.getStorageSync("token"),
          },
          success: (uploadFileRes) => {
            formData.value.picture = JSON.parse(uploadFileRes.data).data.url;
          },
          complete() {
            //隐藏loading
            uni.hideLoading();
          },
        });
      }
    },
  });
};
const submit = async () => {
  await signUp(formData.value);
  uni.showToast({
    title: "发布成功",
  });
  setTimeout(() => {
    uni.navigateBack();
  }, 500);
};
</script>
<style lang="less" scoped>
.publishPage {
  height: 100vh;
  background-color: #fff;

  .scBox {
    text-align: center;
    background: #ccd9fb;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    padding: 50rpx 130rpx;
    font-size: 24rpx;
    color: #000000;
    display: flex;
    flex-direction: column;
    align-items: center;
    & > view {
      margin-top: 16rpx;
    }
  }
  .scImg {
    width: 100%;
    height: 200px;
    image {
      width: 100%;
      height: 100%;
      background: salmon;
    }
    position: relative;
  }
  .closeBox {
    position: absolute;
    right: 5rpx;
    top: 5rpx;
  }
}
/deep/.u-input {
  height: 80rpx;
  background: #ccd9fb;
  border-radius: 8rpx 8rpx 8rpx 8rpx;
  border: 2rpx solid rgba(255, 255, 255, 0.25);
  padding: 0 20rpx !important;
  margin-bottom: 20rpx;
}
.theme {
  display: flex;
  align-items: center;
  image {
    width: 40rpx;
    height: 40rpx;
    margin-right: 10rpx;
  }
  border-top: 1rpx solid #f1eded;
  padding: 26rpx 54rpx;
  margin-top: 30rpx;
  font-size: 26rpx;
  color: #3d3d3d;
}
</style>
